<template>
  <div class="cardBox" v-if="show">
    <el-card class="card">
      <el-form :v-model="user" label-width="60px" v-loading="fLoading">
        <el-row>
          <el-col :span="6">
            <img :src='user.img?url+user.img:``'/>
          </el-col>
          <el-col :span="18">
            <el-form-item label="">
              <el-input
                v-if="type !== '1'"
                type="textarea"
                size="small"
                v-model="user.introduction"
                placeholder="介绍"
                rows="4"
                maxlength="30"
                show-word-limit
              ></el-input>
              <template v-else >
                <span id="introduction">{{ user.introduction }}</span>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称">
              <el-input v-if="type !== '1'" size="small" v-model="user.name" maxlength="10" placeholder="名称"></el-input>
              <template v-else>
                {{ user.name }}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input v-if="type !== '1'" size="small" v-model="user.age" placeholder="年龄"></el-input>
              <template v-else>
                {{ user.age }}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-if="type !== '1'" size="small" v-model="user.email" placeholder="名称"></el-input>
              <template v-else>
                {{ user.email }}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址">
              <el-input v-if="type !== '1'" size="small" v-model="user.address" placeholder="年龄"></el-input>
              <template v-else>
                {{ user.address }}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信">
              <el-input v-if="type !== '1'" size="small" v-model="user.vx" placeholder="名称"></el-input>
              <template v-else>
                {{ user.vx }}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-input v-if="type !== '1'" size="small" disabled v-model="user.sex" placeholder="性别"></el-input>
              <template v-else>
                {{ user.sex }}
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="兴趣">
              <el-input v-if="type !== '1'" size="small" v-model="user.interest" placeholder="兴趣"></el-input>
              <template v-else>
                {{ user.interest }}
              </template>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="btn_groud">
          <el-button size="small" type="primary" @click="submit">{{ type!=='1'?'保存':'和ta聊天' }}</el-button>
          <el-button size="small" @click="next">{{ type!=='1'?'返回':'下一个' }}</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { queryUser } from '@/views/api'

export default {
  props: [
    'info','url','type','show','findUser'
  ],
  data() {
    return {
      user: {},
      fromList: [
        { label: '名称', value: 'name' }
      ],
      fLoading: false,
      uid: ''
    }
  },
  created() {
    this.user = JSON.parse(JSON.stringify(this.info))
    this.uid = JSON.parse(localStorage.getItem('user')).uid
    if( this.type === '1' ) this.getRUser()
    if( this.type === '2' && this.findUser ) {
      this.user = JSON.parse(JSON.stringify(this.findUser))
    }
  },
  methods: {
    next() {
      if( this.type === '2' ) {
        this.$emit('next')
      } else {
        this.getRUser()
      }
    },
    submit() {
      this.$emit('submit', this.user, this.type)
    },
    getRUser() {
      this.fLoading = true
      const data = {
        uid: this.uid
      }
      queryUser(data).then(res => {
        const data = res.data.data;
        this.fLoading = false
        this.user = data.user
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .cardBox {
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;

    .card {
      width: 500px;
      height: 500px;
      background: white;
    }
    .btn_groud {
      transform: translateY(40px);
      display: flex;
      justify-content: right;
      float: right;
    }
  }

  @media screen and (max-width: 750px) {
    .cardBox{
      position: absolute;
      top: 20vh;

      img {
        width: 60px;
      }
      .card {
        width: 80vw;
        height: 380px;
        background: white;
      }
      .btn_groud {
        margin-top: 20px;
        display: flex;
        justify-content: right;
      }
    }

    .el-row{
      .el-form-item {
        margin: 0;
        #introduction {
          font-size: 5px;
          line-height: 1em;
        }
      }
    }

    
  }
</style>